<template>
  <draggable
    :options="{group: falgs, disabled: disabled}"
    @start="startEvent"
    @end="endEvent"
    :list="layoutArr"
    class="dragAreaAll layoutContent"
  >
    <el-row class="rowStyle" v-for="(itemRow, indexRow) in layoutArr" :key="indexRow">
      <el-col :span="itemIn.num" v-for="(itemIn, indexIn) in itemRow" :key="indexIn">
        <div v-if="!itemIn.childList || !itemIn.childList.length" class="grid-content bg-purple emptyBox">
          {{itemIn.num}}
        </div>
        <div v-else class="grid-content bg-purple childBox">
          <div v-for="(itemChild, indexChild) in itemIn.childList" :key="indexChild" class="childItem">
            <p>{{itemChild.title}}</p>
            <i @click="handSingleDel(itemIn.childList, indexChild)" class="el-icon-close"></i>
          </div>
        </div>
      </el-col>
      <div class="delete-grid" @click="handleDel(indexRow)">
        <i class="el-icon-close"></i>
      </div>
    </el-row>
  </draggable>
</template>
<script>
import { MessageBox, Message } from 'element-ui'
import draggable from 'vuedraggable' // 引入拖拽
export default {
  props: ['layoutArr'],
  components: {
    draggable // 拖拽
  },
  data () {
    return {
      disabled: false, // 是否允许其他项目被拖拽到本组件中，false同时也禁止了本组件的拖拽功能
      falgs: 'article' // 要实现两个组件之间的拖拽，需要两个组件的options的group名称保持一致！group：'111'或者group:{name:'111'}，写法都可以
    }
  },
  methods: {
    startEvent (event) {
      this.falgs = '222222'
    },
    endEvent (ev) {
      console.log(3, ev)
      this.falgs = 'article'
    },
    // 删除布局事件
    handleDel (index) {
      this.$emit('handleDel', index)
    },
    // 删除单个子组件
    handSingleDel (arr, index) {
      console.log(arr, index)
      arr.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
.layoutContent {
  height: 100%;
  overflow-y: auto;
  // margin-top: 20px;
  padding: 10px;
  box-sizing: border-box;
  .emptyBox {
    height: 100%;
  }
  .childBox {
    padding: 5px 0;
    .childItem {
      & + .childItem {
        margin-top: 10px;
      }
      position: relative;
      left: 0;
      // top: 4px;
      min-height: 25px;
      border: 1px dashed #aaaaaa;
      width: 98%;
      margin: 4px auto; 
      // margin-left: auto;
      // margin-right: auto;
      .el-icon-close {
        position: absolute;
        right: 3px;
        top: 3px;
        color: #ffffff;
      }
      p {
        text-align: left;
        padding-left: 10px;
      }
    }
  }
}
</style>